import { Routes, Route } from "react-router-dom";
import React, { useState, useEffect, useRef, Suspense } from 'react';


import '@/css/gpts.css'
import { suspendResource, searchGptsResource} from "@/utils/suspend-util";


const { mockGptResource } = suspendResource()
// const gptResource = searchGptsResource('pdf')


const ImageProfileItem = ({ name, desc, imgSrc }) => {

    return (
        <div className="image-profile-card">
            <img src={imgSrc} />
            <h3>{name}</h3>
            <p>{desc}</p>
        </div>
    )
}



// https://www.bilibili.com/video/BV1TD4y1d7ZU/

// React Hooks”之“购物车实战”
// https://www.bilibili.com/video/BV1Xz4y1A7kw
const GptsApp = () => {

    // const [gpts, setGpts] = useState([])
    // const [gpts, setGpts] = useState(gptResource)
    const searchRef = useRef(null)


    const handleEnterKey = (event) => {
        // nativeEvent获取原生的事件对像
        // if(event.nativeEvent.keyCode === 13){
        if (event.keyCode === 13) {
            handleSearch()
        }
    }


    const handleSearch = () => {
        let question = searchRef.current.value

        if (!question || question.trim().length <= 0) {
            return
        }

        console.log(question)
        setGpts(searchGptsResource(question))
    }

    return (
        <>

            <div className="text_logo mx-auto w-full max-w-7xl">
                <span className="slogan_txt">Gpts Search</span>
            </div>

            <div className="mx-auto w-full max-w-2xl px-6 text-center mt-4">
                <div className="flex items-center relative">
                    <input className="flex-1 px-4 py-3 border-2 border-primary bg-white rounded-lg" placeholder="search GPTs" type="text"
                        ref={searchRef} onKeyDown={handleEnterKey} />
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="absolute right-4 cursor-pointer"
                        onClick={handleSearch}>
                        <polyline points="9 10 4 15 9 20"></polyline>
                        <path d="M20 4v7a4 4 0 0 1-4 4H4"></path>
                    </svg>
                </div>
            </div>

            <div className="relative mt-8">
                <div className="mx-auto max-w-7xl">
                    <div className="[column-count:1] md:mb-12 md:[column-count:2] lg:mb-16 lg:[column-count:3]">
                        {
                            mockGptResource.read().map((item) => {
                            // gpts.read().map((item) => {
                                return (
                                    <ImageProfileItem key={`gpts_${item.uuid}`} name={item.name} desc={item.description}
                                        imgSrc={item.avatar_url ? item.avatar_url : "https://picsum.photos/300/200"} />
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        </>
    )
}




export default GptsApp
